<template>
  <div class="form-cell" v-if="formList.length>0">
    <div v-for="(item,idx) in formList" :key="idx" @click="setActiveIdx(idx)">

      <div v-if="item.type==='input'" class="form-cell-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-cell-item__label"><span v-if="item.required" class="color-red fz-12 m-r-4">*</span>{{item.label}}</div>
        <div class="form-cell-item__content">
          <block v-if="action==='show'">
            <div class="show-div-value">{{item.value}}</div>
          </block>
          <block v-else>
            <input :maxlength="row.maxlength?row.maxlength:140" placeholder-class="__placeholder" placeholder-style="color:#ccc" @input="inputChange($event,idx)" :value="item.value" class="input" :placeholder="item.desc" />
          </block>
        </div>
      </div>

      <div v-if="item.type==='textarea'" class="form-cell-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-cell-item__label"><span v-if="item.required" class="color-red fz-12 m-r-4">*</span>{{item.label}}</div>
        <div class="form-cell-item__content" style="height: auto">
          <block v-if="action==='show'">
            <div class="show-div-value">{{item.value}}</div>
          </block>
          <block v-else>
            <textarea maxlength="-1" :auto-height="item.autoHeight" :style="item.styleStr" placeholder-class="__placeholder" placeholder-style="color:#ccc" @input="inputChange($event,idx)" :value="item.value" class="input" :placeholder="item.desc" ></textarea>
          </block>
        </div>
      </div>

      <div v-if="item.type==='time'" class="form-cell-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-cell-item__label"><span v-if="item.required" class="color-red fz-12 m-r-4">*</span>{{item.label}}</div>
        <div class="form-cell-item__content">
          <block v-if="action==='show'">

          </block>
          <block v-else>
            <layout-time  :mode="item.mode" @uptime="upTime" :val="item.value">
              <span class="fz-14" v-if="item.value">{{item.value}}</span>
              <span class="fz-14 c9" v-else>请设置时间</span>
            </layout-time>
          </block>
        </div>
      </div>

      <div v-if="item.type==='picker'" class="form-cell-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-cell-item__label"><span v-if="item.required" class="color-red fz-12 m-r-4">*</span>{{item.label}}</div>
        <div class="form-cell-item__content">

          <block v-if="action==='show'">
            <div class="show-div-value">{{item.value}}</div>
          </block>

          <block v-if="action==='edit'">
            <picker style="width: 100%" :value="item.selectOptIdx" :range="item.options" @change="pickerChange($event,idx)">
              <div class="" v-if="item.value">{{item.value}}</div>
              <div class="__placeholder" v-else>{{item.desc||'请选择'}}</div>
            </picker>
          </block>

          <block v-if="action==='add'">
            <picker style="width: 100%" :range="item.options" @change="pickerChange($event,idx)">
              <div class="" v-if="item.value">{{item.value}}</div>
              <div class="__placeholder" v-else>{{item.desc||'请选择'}}</div>
            </picker>
          </block>

        </div>
        <div class="form-cell-item__right">
          <span class="wzwicon iconright font16" style="color: #666"></span>
        </div>
      </div>

      <div v-if="item.type==='area'" class="form-cell-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-cell-item__label">{{item.label}}</div>
        <div class="form-cell-item__content">

          <block v-if="action==='show'">
            <div class="show-div-value">{{item.value}}</div>
          </block>

          <block v-if="action==='edit'">
            <fun-address @up="updateAddress" ref="address">
              <div @click="openPop('address')">
                <div v-if="item.value">{{item.value}}</div>
                <div class="__placeholder" v-if="!item.value">{{item.desc||'选择位置'}}</div>
              </div>
            </fun-address>
          </block>

          <block v-if="action==='add'">

            <fun-address @up="updateAddress" ref="address">
              <div @click="openPop('address')">
                <div class="__placeholder" >{{item.desc||'选择位置'}}</div>
              </div>
            </fun-address>
          </block>

        </div>
        <div class="form-cell-item__right">
          <icon  type="iconarrowleft" size="16"  color="#666"></icon>
        </div>
      </div>

      <div v-if="item.type==='img'" class="form-upload-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-upload-item__label c3 flex flex-vertical-c flex-justify-between">
          <div class="text">
            <span v-if="item.required" class="color-red fz-12 m-r-4">*</span>
            <span>{{item.label}}</span>
          </div>
          <div>
            <span class="color-primary">{{item.count}}</span>/<span>{{item.limit}}</span>
          </div>
        </div>
        <div class="form-upload-item__content">
          <block v-if="action==='show'">
            <upload-image show-loading="true" :key="idx" :has="item.hasImg" :limit="item.limit" :ext="idx"></upload-image>
          </block>
          <block v-if="action==='add'">
            <upload-image show-loading="true" :key="idx" :limit="item.limit" :ext="idx" @done="upImgSuccess"></upload-image>
          </block>
          <block v-if="action==='edit'">
            <upload-image show-loading="true" :key="idx" :has="item.hasImg" :limit="item.limit" :ext="idx" @done="upImgSuccess"></upload-image>
          </block>

        </div>
      </div>

      <div v-if="item.type==='file'" class="form-upload-item cell-item" :class="{nobor:idx===formList.length-1}">
        <div class="form-upload-item__label c3 flex flex-vertical-c flex-justify-between">
          <div class="text">
            <span v-if="item.required" class="color-red fz-12 m-r-4">*</span>
            <span>{{item.label}}</span>
          </div>
          <div>
            <span class="color-primary">{{item.count}}</span>/<span>{{item.limit}}</span>
          </div>
        </div>
        <div class="form-upload-item__content">
          <block v-if="action==='show'">
            <upload-file :show-loading="true" :key="idx" :limit="item.limit" :has="item.hasFile" :ext="idx" @done="upFileSuccess"></upload-file>
          </block>
          <block v-if="action==='add'">
            <upload-file :show-loading="true" :key="idx" :limit="item.limit" :ext="idx" @done="upFileSuccess"></upload-file>
          </block>
          <block v-if="action==='edit'">
            <upload-file :show-loading="true" :key="idx" :has="item.hasFile" :limit="item.limit" :ext="idx" @done="upFileSuccess"></upload-file>
          </block>

        </div>
      </div>

    </div>

  </div>
</template>

<script>
import { objTranslate } from '@/common/helper'
import { hideLoading, showLoading } from '@/common/fun'
import UploadImage from '@/componets/upload-image/upload-image'
import FunAddress from '@/componets/fun-address/fun-address'
import LayoutTime from '@/componets/layout-time/layout-time'
import UploadFile from '@/componets/upload-file/upload-file'

export default {
  name: 'DiyForm',
  components: { UploadFile, LayoutTime, FunAddress, UploadImage },
  props: {
    eid: {
      type: String,
      require: true
    },
    // 编辑模式
    action: {
      type: String,
      default: 'add'
    },
    // 编辑模式
    isedit: {
      type: Boolean,
      default: false
    },
    // 显示模式
    isshow: {
      type: Boolean,
      default: false
    },
    forms: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      idx: 0,
      formList: []
    }
  },
  watch: {
    formList: {
      deep: true,
      immediate: true,
      handler (newVal) {
        if (Array.isArray(newVal) && newVal.length > 0) {
          this.$emit('update', objTranslate(newVal))
        }
      }
    }
  },

  created () {
    const _arr = objTranslate(this.forms)

    // 我也太聪明了
    if (Array.isArray(_arr) && _arr.length > 0) {
      const _formList = _arr.map(row => {
        // 只有picker是要特殊处理的
        if (row.type === 'picker' && this.action === 'add') {
          row.options = row.value.split('|')
          row.value = ''
          console.log(row)
        }

        if (row.type === 'picker' && this.action === 'edit') {
          // 下标
          const selectOptIdx = row.options.indexOf(row.value)
          if (selectOptIdx !== -1) {
            row.selectOptIdx = selectOptIdx
          }
        }

        // 编辑和显示模式下图片格式化
        if (this.action === 'show' && row.type === 'img') {
          row.hasImg = []
          row.hasImg = row.value.split('|')
          row.count = row.hasImg.length
        }

        if (this.action === 'edit' && row.type === 'img') {
          row.hasImg = []
          if (row.value) {
            row.hasImg = row.value.split('|')
          }
          row.count = row.hasImg.length
        }

        // 文件
        if (this.action === 'show' && row.type === 'file') {
          row.hasFile = []
          row.hasFile = row.value.split('|')
          row.count = row.hasFile.length
        }

        if (this.action === 'edit' && row.type === 'file') {
          row.hasFile = []
          if (row.value) {
            row.hasFile = row.value.split('|')
          }
          row.count = row.hasFile.length
        }
        console.log(row)
        return row
      })

      this.formList = _formList
    }

    console.log(this.formList)
  },
  methods: {
    upTime (e) {
      console.log(e)
      this.setVal(e)
    },
    openPop (name) {
      this.$refs[name][0].show()
    },
    updateAddress (data) {
      // console.log(data)
      this.setVal(data.strArr.join(''))
    },
    getData () {
      // console.log('formList is', this.formList)
      // return objTranslate(this.formList)
    },
    openAddressChoose () {
      const rt = { province: '北京', city: '北京', area: '西山', town: '香山公园' }
      showLoading('获取地址')
      setTimeout(() => {
        hideLoading()
        this.addressCall(rt)
      }, 500)
    },
    setActiveIdx (idx) {
      console.log(`active index change,current idx is ${idx}`)
      this.idx = idx
    },
    setVal (val, idx) {
      const _idx = idx || this.idx
      this.$set(this.formList[_idx], 'value', val)
    },
    pickerChange (e, idx) {
      const val = e.detail.value
      this.setVal(this.formList[idx].options[val])
    },
    inputChange (e, idx) {
      const val = e.detail.value
      this.setVal(val, idx)
    },
    addressCall ({ province, city, area, town }) {
      // const val = e.detail.value
      this.setVal(Object.values({ province, city, area, town }).join(' '))
    },
    upFileSuccess ({ files, ext }) {
      console.log(files, ext)
      this.setVal(files.join('|'))
      this.$set(this.formList[this.idx], 'count', files.length)
    },
    upImgSuccess ({ imgs, ext }) {
      console.log(imgs, ext)
      this.setVal(imgs.join('|'))
      this.$set(this.formList[this.idx], 'count', imgs.length)
    }
  }
}
</script>
<style lang="scss" scoped>
  .nobor{
    border-bottom: none !important;
  }
  .form{

    &-panel{
      margin: 10px;
    }
    &-title{
      display: flex;
      align-items: center;
      padding: 10px 0;
      &__place{
        background: #00A8FF;
        width: 4px;
        height: 16px;
        margin: 0 10px;
        border-radius: 2px;
      }
      &__text{
        color: #333333;
        font-weight: bold;
      }
    }
    &-upload{

      &-item{
        display: block;
        &__label{
          border-bottom: 1px solid #eee;
          padding: 30rpx 0;
        }
        &__content{
          padding: 10px 0;
        }

      }

    }
    &-cell{
      background: white;
      border-radius: 4px;
      overflow: hidden;
      font-size: 14px;
      &-item{
        display: flex;
        align-items: center;
        margin: 0 10px;

        &__label{
          color: #333;
          width: 200rpx;
          text-align:justify;

        }
        &__content{
          flex: 1;
          height: 32rpx;
          line-height: 32rpx;
          padding: 30rpx 0;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eee;
          .input{
            font-size: 14px;
            flex: 1;
            color: #333;

          }

          .__placeholder{
            color: #CCC;
          }

        }
        &__right{
          width: 32px;
          text-align: center;
        }

      }
    }

  }
</style>
